/**
*@description 用户画像》产品需求偏好
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import MainLayout from '../components/MainLayout/MainLayout';
import PieDouble from '../components/Persons/PieDouble';
import RadarSimple from '../components/Persons/RadarSimple';
import BarClick from '../components/Persons/BarClick';
import BarSimple from '../components/Persons/BarSimple';
import Bar2 from '../components/Persons/Bar2';
import TableList from '../components/TableList';
import {Card, Icon, Tooltip, Row, Col, Modal} from 'antd';

const classTips = (<div>品类倾向&nbsp;
  <Tooltip placement="right" title="品类倾向是指根据用户历史购买产品信息计算得到的产品品类倾向偏好程度">
          <Icon type="question-circle-o" />
  </Tooltip></div>),
effectTips = (<div>功效倾向&nbsp;
  <Tooltip placement="right" title="功效倾向是指根据用户历史购买产品信息计算得到的产品功效倾向偏好程度">
          <Icon type="question-circle-o" />
  </Tooltip></div>),
productTips = (<div>产品倾向&nbsp;
  <Tooltip placement="right" title="产品倾向是指根据用户历史购买产品信息计算得到的具体产品倾向偏好程度">
          <Icon type="question-circle-o" />
  </Tooltip></div>),
skuTips = (<div>SKU倾向&nbsp;
  <Tooltip placement="right" title="SKU倾向是指根据用户历史购买产品信息计算得到的产品SKU倾向偏好程度">
          <Icon type="question-circle-o" />
  </Tooltip></div>),
colorTips = (<div>颜色倾向&nbsp;
  <Tooltip placement="right" title="颜色倾向是指根据用户历史购买产品信息计算得到的产品颜色倾向偏好程度">
          <Icon type="question-circle-o" />
  </Tooltip></div>);

class ProductNeed extends Component {
  constructor(props) {
      super(props);
      this.state = {visible: false}
  }
  // 获取数据
  fetchData(type, search){
    this.props.dispatch({
            type: type,
            payload: search
    })
  };
  initData(){
    this.fetchData('ProductNeed/classQuery','');
    this.fetchData('ProductNeed/effectQuery','');
    this.fetchData('ProductNeed/productQuery','');
    this.fetchData('ProductNeed/colorQuery','');
  };
  componentWillMount() {
    this.initData();
  };
  showModal() {
    this.setState({
      visible: true,
    });
  };
  handleOk() {
    console.log('Clicked OK');
    this.setState({
      visible: false,
    });
  };
  handleCancel(e) {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  render(){
    let onEvents = {
      'click': (e)=>{
        this.fetchData('ProductNeed/skuQuery','classId='+e.data.classId);
        this.showModal();
      }
    }
  return (
    <MainLayout>
        <div>
        <Row gutter={16} style={{marginTop:"29px"}}>
              <Col className="gutter-row" span={16}>
              <div className="gutter-box">
                    <Row gutter={16}>
                        <Col className="gutter-row" span={12}>
                            <div className="gutter-box">
                              <Card title={classTips}>
                                    <PieDouble data={this.props.ProductNeed.classData} loading={this.props.ProductNeed.classLoading} seriesName="品类倾向" width={"100%"} height={300} />
                              </Card>
                            </div>
                        </Col>
                        <Col className="gutter-row" span={12}>
                              <div className="gutter-box">
                                  <Card title={effectTips}>
                                        <RadarSimple seriesName="功效倾向" data={this.props.ProductNeed.effectData} loading={this.props.ProductNeed.effectLoading} width={"100%"} height={300} />
                                  </Card>
                            </div>
                        </Col>
                    </Row>
                        <Card title={productTips}>
                              <BarClick onEvents={onEvents} seriesName="产品倾向" data={this.props.ProductNeed.productData} loading={this.props.ProductNeed.productLoading} width={"100%"} height={300} />
                        </Card>
                        <Card title={colorTips}>
                              <BarSimple seriesName="颜色倾向" data={this.props.ProductNeed.colorData} loading={this.props.ProductNeed.colorLoading} labelRotate={45} width={"100%"} height={300} />
                        </Card>
              </div>
              </Col>
              <Col className="gutter-row" span={8}><div className="gutter-box"><TableList pageSize={18} /></div></Col>
        </Row>
        <Modal width={800} title={skuTips} visible={this.state.visible} onOk={this.handleOk.bind(this)} onCancel={this.handleCancel.bind(this)} >
            <Bar2 seriesName="SKU倾向" data={this.props.ProductNeed.skuData} loading={this.props.ProductNeed.skuLoading} width={"100%"} height={300} />
        </Modal>
        </div>
    </MainLayout>
  );
  }
};

ProductNeed.propTypes = {
};

function mapStateToProps({ ProductNeed }) {
  return {
    ProductNeed: {...ProductNeed},
  };
}

export default connect(mapStateToProps)(ProductNeed);